<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8">

		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

		<title>03CSS고급선택자</title>
		<style type="text/css">
		#first,#third{color: orange; font-size: 24px; font-style: italic}	
		/*그룹선택자*/
		
		#hmenu li{color: red; }	/*후손선택자*/
		#fmenu li{color:blue; }	
		
		
		#hmenu2 >h1{color: gold}	/*자식선택자*/
		#fmenu2 >li{color: silver}
		#hmenu2 >li{color: purple}
		
		.head{color: red}
		.head-item{font-size: 24px}
		tr{font-style: italic}
		td{font-family: "Gill Sans MT Ext Condensed Bold"}
		ul{color : blue;}
		
		div+p{color: lightblue;}
		p+p{color: pink;}
		</style>
	</head>
	<body>
		<h1>03CSS고급선택자</h1>
		<h2>그룹 선택자</h2>
		<p>하나 이상의 선택자에  특정 스타일 적용</p>
		<p>각 요소들은 ,로 구분</p>
		<div id="first">첫번째</div>
		<div id="second">두번째</div>
		<div id="third">세번째</div>
		<div id="fourth">네번째</div>

		<hr />
		<h2>하위선택자</h2>
		<p>부모 선택자를 기준으로 모든 하위 선택자를 지정해서 스타일 적용</p>
		<p>HTML 문서의 계층구조를 이용</p>
		<ul id="hmenu">
			<li><ol><li>Home</li><li>About</li></ol></li>
			<li>메일</li>
			<li>더보기</li>
		</ul>
		
		<ul id="fmenu">
			<li>회사소개</li>
			<li>제휴제안</li>
			<li>이용약관</li>
		</ul>
		
			<hr />
		<h2>자식child 선택자</h2>
		<p>부모 선택자를 기준으로 모든 자식 선택자를 지정해서 스타일 적용</p>
		<p>HTML 문서의 계층구조를 이용</p>
		<div id="hmenu2">
			<h1>제목</h1>
			<div id="sub"><h1>제목2</h1></div>
			<li>메일</li>
			<li>더보기</li>
		</div>
		<ul id="fmenu2">
			<li>회사소개</li>
			<li>제휴제안</li>
			<li>이용약관</li>
		</ul>
		
		<hr />
		<h2>인접 Adjacent선택자</h2>
		<p>동일 계층 안에서 한요소를 기준으로 바로 뒤 요소를 선택해서 스타일 적용 </p>
		<p>HTML 문서의 계층구조를 이용</p>
		<div>
			<p>첫번째 줄</p>
			<p>두번째 줄</p>
			<div>블럭요소</div>			
			<p>세번째 줄</p>
		</div>
		
		<table>
			<tr class="head">
				<td class="head-item">Lorem</td>
				<td class="head-item">inpsum</td>
				
			</tr>
		</table>
		
	</body>
</html>
